<template>
  <el-row>
    <el-form label-position="left" label-width="120px">
      <el-col :span="24">
        <Portlet title="服务信息">
          <el-table
            :header-cell-style="{'text-align': 'center'}"
            :cell-style="{'text-align': 'center'}"
            border
            max-height="500"
            :data="orderService"
            class="text-center"
          >
            <el-table-column
              prop="orderNo"
              label="服务单号"
            >
            </el-table-column>
            <el-table-column
              prop="serviceType"
              label="服务类型">
            </el-table-column>
            <el-table-column
              prop="appointDateStr"
              label="预约时间">
              <template slot-scope="scope">
                {{ orderService[scope.$index]['appointDateStr'] | unixTimestampFilter}}
              </template>
            </el-table-column>
            <el-table-column
              prop="memo"
              label="预约备注">
            </el-table-column>
            <el-table-column
              prop="serviceUserName"
              label="服务人">
            </el-table-column>
            <el-table-column
              prop="serviceState"
              label="状态">
              <template slot-scope="scope">
                {{ orderService[scope.$index]['serviceState'] | filterDataBaseDictionary}}
              </template>
            </el-table-column>
          </el-table>
        </Portlet>

        <Portlet title="物流节点">
          <div style="position: relative;margin-bottom: 20px;">
            <div style="position: absolute; left: 7px; top: 25px; bottom: 15px; border-left: 1px dashed #c2cad8;"></div>
            <table class="table table-list-circle show-table" style="position: relative;">
              <tbody>
              <tr v-for="(node, index) in orderNodes" :key="index">
                <td width="150px" style="vertical-align: top;">
                  <i class="fa bg-white font-blue"
                     :class="{'fa-circle-o': index + 1 != orderNodes.length, 'fa-circle': index + 1 == orderNodes.length}"></i>
                  <span style="display: inline-block; margin-left: 10px;">{{ node.opTime | unixTimestampFilter }}</span>
                </td>
                <td>
                  <div v-for="(item, index) in matchImageArr(node.memo)" :key="index">
                    {{ item.text }}
                    <upload-image v-if="item.imageStr" :value="getImage(item.imageStr)" :readonly="true"></upload-image>
                  </div>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </Portlet>
      </el-col>
    </el-form>
  </el-row>
</template>
<script>
import {matchImageArr} from '@/filters'
import {getImage} from '@/utils'
export default {
  props: {
    id: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      orderNodes: [],
      orderService: []
    }
  },
  created() {
    if (this.id) {
      this.$ajax.get('/ms-terminal-order/orderData/getOrderNodes', {orderId: this.id}).then(response => {
        if (Array.isArray(response.data)) {
          this.orderNodes = response.data
        }
      })
      this.$ajax.get('/ms-terminal-order/orderData/getServiceOrders', {orderId: this.id}).then(response => {
        if (Array.isArray(response.data)) {
          this.orderService = response.data
        }
      })
    }
  },
  methods: {
    matchImageArr,
    getImage
  }
}
</script>
